{% init show_tags = True %}

{% if show_tags %}
<div class="col-md-12">
    <span><i class="fa fa-tags"></i></span> 
    <span id="tags-span" class="tag-toggle"></span>

    <span id="edit-tags-span" class="tag-toggle hide">
        <input id="tagEditText" type="text" value="" />
        <input type="button" id="tagEditBtn" class="btn" value="确认"/>
        <input type="button" class="tag-toggle-btn btn-danger" value="取消"/>
    </span>

    {% if _user_name == file.creator  %}
        <a class="tag-toggle-btn tag-toggle">编辑</a>
    {% end %}
</div>
{% end %}

<script type="text/javascript">
var gFileId = "{{file.id}}";

/**
 * 初始化标签列表
 */
function initTags() {
    $.get("/note/tag/{{file.id}}", function(data, status) {
        var tagsList = [];
        var response = data;
        var tags = response.data;
        $("#tags-span").html("");
        tags.forEach(function (element, index) {
            var span = $("<span>");
            var link = $("<a>");
            link.addClass("link");
            link.text(element.name);
            link.attr("href", "/note/tagname/"+element.name);
            span.addClass("tag gray-tag");
            span.append(link);
            $("#tags-span").append(span);
            tagsList.push(element.name);
        })
        $("#tagEditText").val(tagsList.join(" "));
    }).fail(function (text) {

    })
}

function toggleFileTagsEditor() {
    // alert("hello");
    var div = $("#edit-tags-span");
    if (div.css("display") == "none") {
        $("#tags-span").hide();
        $("#edit-tags-span").show(200);
        $("#toggleFileTagsEditor").text("取消")
    } else {
        $("#edit-tags-span").hide(200);
        $("#tags-span").show();
        $("#toggleFileTagsEditor").text("编辑")
    }
}

function postTagUpdate() {
    $.post("/note/tag/update", {file_id: gFileId, tags: $("#tagEditText").val()}, 
        function(data, status) {
            initTags();
            $(".tag-toggle").toggle();
        }
    );
}

$("#tagEditBtn").on("click", function() {
    postTagUpdate();
})

$("#tagEditText").on("keyup", function (e) {
    console.log(e);
    if (e.which == 13) {
        postTagUpdate();
    }
});

$(".tag-toggle-btn").click(function () {
    $(".tag-toggle").toggle();
})

$(function () {
    initTags();
})
</script>